import React from 'react';
import ReactDOM from 'react-dom';

// hooks 组件
const Counter = () => {
  // 定义组件状态
  const [count, setCount] = React.useState(0);
  // 修改组件状态
  const handleCount = () => {
    setCount(count + 1);
  };
  return (
    <div style={{ border: 'solid 1px blue', padding: 24 }}>
      这个组件是使用 hooks API 写的
      <h1>{count}</h1>
      <button onClick={handleCount}>+1</button>
    </div>
  );
};

// 类组件
export class App extends React.Component {
  render() {
    return (
      <div style={{ border: 'solid 1px red', padding: 24 }}>
        <h1>这个组件是使用 class 组件 API 写的</h1>
        {/* 这是一个使用 hooks 创建的组件 */}
        <Counter />
      </div>
    );
  }
}
